<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { useDelMenu, useGetMenuPage } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrUpdate from './add-or-update.vue'

const STATUS_ENUM = {
    0: '正常',
    1: '停用',
}

type IState = {
    menuName?: string
}
const menuId = ref<string>('')
const initialState: IState = {
    menuName: '',
}
const type = ref<string>('')
const visible = ref<boolean>(false)
const columns: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '菜单名称',
        prop: 'menuName',
    },

]
const state = ref(cloneDeep(initialState))
const isExpandAll = ref<boolean>(false)
const { createConfirmModal, createMessage } = useMessage()
const params = computed(() => ({
    ...state.value,
}))

const { data: menuList, isLoading } = useGetMenuPage(params)
const { mutate: delMenuMutate } = useDelMenu()

function search(values: FieldValues) {
    state.value = values
}
function reset() {
    state.value = cloneDeep(initialState)
}

function handleAdd() {
    visible.value = true
    type.value = 'add'
}

function handleUpdate(id: string) {
    type.value = 'edit'
    menuId.value = id
    visible.value = true
}

function handleDelete(menuId: string) {
    createConfirmModal({ content: '是否确认删除？', onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        delMenuMutate(menuId, {
            onSuccess: () => {
                createMessage.success('删除成功')
            },
        })
    } })
}
</script>

<template>
    <div class="mb-20">
        <ElCard shadow="never">
            <SearchForm v-bind="state"
                        :columns="columns"
                        submit-text="查询"
                        @submit="search"
                        @reset="reset"
            />
        </ElCard>
    </div>

    <ElCard shadow="never">
        <el-button type="primary"
                   class="mb-20"
                   @click="handleAdd"
        >
            新增
        </el-button>

        <el-table v-loading="isLoading"
                  :data="menuList"
                  row-key="menuId"
                  border
                  :default-expand-all="isExpandAll"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                  :expand-row-keys="['0']"
        >
            <el-table-column prop="menuName"
                             label="菜单名称"
                             :show-overflow-tooltip="true"
                             width="160"
            />

            <el-table-column prop="icon"
                             label="图标"
                             align="center"
                             width="100"
            >
                <template #default="scope">
                    <Icon :icon="scope.row.icon"
                          color="var(--el-text-color-placeholder)"
                    />
                </template>
            </el-table-column>

            <el-table-column prop="orderNum"
                             label="排序"
                             width="60"
            />

            <!-- <el-table-column prop="perms"
                             label="权限标识"
                             :show-overflow-tooltip="true"
            /> -->

            <el-table-column prop="component"
                             label="组件路径"
                             :show-overflow-tooltip="true"
            />

            <el-table-column prop="status"
                             label="状态"
                             width="80"
            >
                <template #default="{ row }">
                    {{ STATUS_ENUM[row.status] }}
                </template>
            </el-table-column>

            <!-- <el-table-column label="创建时间"
                             align="center"
                             prop="createTime"
            >
                <template #default="{ row }">
                    <span>{{ row.createTime }}</span>
                </template>
            </el-table-column> -->

            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width"
            >
                <template #default="{ row }">
                    <el-button v-if="row.parentId"
                               type="text"
                               @click="handleUpdate(row.menuId)"
                    >
                        修改
                    </el-button>

                    <el-button v-if="row.parentId"
                               type="text"
                               @click="handleDelete(row.menuId)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </ElCard>

    <AddOrUpdate :key="menuId"
                 v-model:type="type"
                 v-model:menuId="menuId"
                 v-model:visible="visible"
                 v-model:menuList="menuList"
    />
</template>

<style scoped lang='less'></style>
